<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="app">

    <!-- <div style="color: red; fontsize:30px"> -->

  </div>


  </div>
  <!-- 引入React依赖 -->
  <script src="../React/react.development.js"></script>
  <script src="../React/react-dom.development.js"></script>
  <script src="../React/babel.min.js"></script>

  <script type="text/babel">
    class App extends React.Component {
      constructor() {
        super()
        //定义变量
        this.state = {
          title: "标题",
          imgUrl: "https://upload.jianshu.io/users/upload_avatars/1102036/c3628b478f06.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240",
          link: "https://www.baidu.com/",
          active: true,
        }
      }
      render() {
        const { title, imgUrl, link, active } = this.state

        return (
          <div>
            { /* 绑定普通属性 */}
            <h2 title={title}>我是标题</h2>
            <img src={imgUrl} />
            <a href={link} target="_blank">百度一下</a>

            { /* 绑定class */}
            <div className="box title"> div元素1 </div>
            <div className={"box title " + (active ? "active" : "")}> div元素2 </div>

            { /* 绑定Style */}
            <div style={{color: "red", fontSize: "50px"}}>div，绑定Style属性</div>


            </div>
        )
      }
    }
  </script>

  <script type="text/babel">
    ReactDOM.render(<App />, document.getElementById("app"))
  </script>

</body>

</html>